<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">

	<ui:define name="content">

		<h1 class="title ui-widget-header ui-corner-all">AJAX - Select Components</h1>
		<div class="entry">
			<p>This example demonstrates usage of p:ajax with PrimeFaces selectOneMenu.</p>
			
			<h:form id="form">

                <p:growl id="msgs" showDetail="true" />
				
				<p:panel header="Double Combo" style="margin-bottom:10px;">

                    <h:panelGrid columns="2" cellpadding="5">
                        <h:outputText value="City: " />
                        <p:selectOneMenu id="city" value="#{pprBean.city}" style="margin-right:10px">
                            <f:selectItem itemLabel="Select City" itemValue="" />
                            <f:selectItems value="#{pprBean.cities}" />
                            <p:ajax listener="#{pprBean.handleCityChange}" update="suburbs"/>
                        </p:selectOneMenu>

                        <h:outputText value="Suburb: " />
                        <p:selectOneMenu id="suburbs" value="#{pprBean.suburb}" style="margin-right:10px">
                            <f:selectItem itemLabel="Select Suburb" itemValue="" />
                            <f:selectItems value="#{pprBean.suburbs}" />
                        </p:selectOneMenu>
                    </h:panelGrid>

                    <p:separator />

					<p:commandButton value="Submit" update="msgs" actionListener="#{pprBean.displayLocation}" id="btnSubmit"/>

				</p:panel>
				
			</h:form>
					
			<h3>Source</h3>
			<p:tabView>
				<p:tab title="pprSelect.xhtml">
<pre name="code" class="xml">
&lt;h:form id="form"&gt;

    &lt;p:growl id="msgs" showDetail="true"/&gt;
				
	&lt;p:panel header="Double Combo" style="margin-bottom:10px;"&gt;
        &lt;h:panelGrid columns="2" cellpadding="5"&gt;
            &lt;p:selectOneMenu id="city" value="\#{pprBean.city}"&gt;
                &lt;f:selectItem itemLabel="Select City" itemValue="" /&gt;
                &lt;f:selectItems value="\#{pprBean.cities}" /&gt;
                &lt;p:ajax update="suburbs"
                        listener="\#{pprBean.handleCityChange}" /&gt;
            &lt;/p:selectOneMenu&gt;

            &lt;p:selectOneMenu id="suburbs" value="\#{pprBean.suburb}"&gt;
                &lt;f:selectItem itemLabel="Select Suburb" itemValue="" /&gt;
                &lt;f:selectItems value="\#{pprBean.suburbs}" /&gt;
            &lt;/p:selectOneMenu&gt;
        &lt;/h:panelGrid&gt;

        &lt;p:separator /&gt;
		
		&lt;p:commandButton value="Submit" update="msgs" actionListener="\#{pprBean.displayLocation}" id="btnSubmit"/&gt;

	&lt;/p:panel&gt;

&lt;/h:form&gt;
</pre>
				</p:tab>
				
				<p:tab title="PPRBean.java">
					<pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;
import java.util.HashMap;
import java.util.Map;

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;

public class PPRBean implements Serializable {

	private String city;

	private String suburb;
	
	private Map&lt;String,String&gt; cities = new HashMap&lt;String, String&gt;();

	private Map&lt;String,Map&lt;String,String&gt;&gt; suburbsData = new HashMap&lt;String, Map&lt;String,String&gt;&gt;();
	
	private Map&lt;String,String&gt; suburbs = new HashMap&lt;String, String&gt;();

	public PPRBean() {
		cities.put("Istanbul", "Istanbul");
		cities.put("Ankara", "Ankara");
		cities.put("Izmir", "Izmir");
		
		Map&lt;String,String&gt; suburbsIstanbul = new HashMap&lt;String, String&gt;();
		suburbsIstanbul.put("Kadikoy", "Kadikoy");
		suburbsIstanbul.put("Levent", "Levent");
		suburbsIstanbul.put("Cengelkoy", "Cengelkoy");
		
		Map&lt;String,String&gt; suburbsAnkara = new HashMap&lt;String, String&gt;();
		suburbsAnkara.put("Kecioren", "Kecioren");
		suburbsAnkara.put("Cankaya", "Cankaya");
		suburbsAnkara.put("Yenimahalle", "Yenimahalle");
		
		Map&lt;String,String&gt; suburbsIzmir = new HashMap&lt;String, String&gt;();
		suburbsIzmir.put("Cesme", "Cesme");
		suburbsIzmir.put("Gumuldur", "Gumuldur");
		suburbsIzmir.put("Foca", "Foca");
		
		suburbsData.put("Istanbul", suburbsIstanbul);
		suburbsData.put("Ankara", suburbsAnkara);
		suburbsData.put("Izmir", suburbsIzmir);
	}
	
	public String getCity() {
		return city;
	}

	public void setCity(String city) {
		this.city = city;
	}

	public String getSuburb() {
		return suburb;
	}

	public void setSuburb(String suburb) {
		this.suburb = suburb;
	}

	public Map&lt;String, String&gt; getCities() {
		return cities;
	}

	public void setCities(Map&lt;String, String&gt; cities) {
		this.cities = cities;
	}
	
	public Map&lt;String, Map&lt;String, String&gt;&gt; getSuburbsData() {
		return suburbsData;
	}

	public void setSuburbsData(Map&lt;String, Map&lt;String, String&gt;&gt; suburbsData) {
		this.suburbsData = suburbsData;
	}
	
	public Map&lt;String, String&gt; getSuburbs() {
		return suburbs;
	}

	public void setSuburbs(Map&lt;String, String&gt; suburbs) {
		this.suburbs = suburbs;
	}
	
	public void handleCityChange() {
		if(city !=null &amp;&amp; !city.equals(""))
			suburbs = suburbsData.get(city);
		else
			suburbs = new HashMap&lt;String, String&gt;();
	}

    public void displayLocation() {
        FacesMessage msg = new FacesMessage("Selected", "City:" + city + ", Suburb: " + suburb);

        FacesContext.getCurrentInstance().addMessage(null, msg);
    }
}

					</pre>
				</p:tab>
			</p:tabView>

						
					</div>
				
	</ui:define>
</ui:composition>